<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 发布管理</el-breadcrumb-item>
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                <el-breadcrumb-item>发起活动</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="活动主题">
                        <el-input v-model="form.activityname" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="活动地点">
                        <el-input v-model="form.activityplace" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="活动时间">
                        <el-col :span="11">
                            <el-date-picker v-model="form.activitytime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                                 placeholder="选择开始时间" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="活动金额">
                        <el-input v-model="form.activitymoney" type="number"></el-input>
                    </el-form-item>                    
                    <el-form-item label="活动简介">
                        <el-input type="textarea" clearable rows="5" v-model="form.activityinfo"></el-input>
                    </el-form-item>
                    <el-form-item label="活动海报">
                        <el-tooltip content="点击图标上传海报" placement="right" effect="light">
                            <div class="image-pre">
                                <span class="upload-m">
                                    <i class="el-icon-upload" 
                                       style="color:#ecf0f1;font-size:25px;cursor:pointer;"
                                       @click="uploadLogo"></i>
                                    <input type="file" name="pic" id="logoFile" class="el-upload__input" accept="image/*" 
                                    ref="getfile" @change="getFile">
                                </span>
                                <!-- <span class="upload-mm">
                                    <i class="el-icon-upload" 
                                       style="color:#747d8c;font-size:25px;cursor:pointer;"
                                       @click="uploadLogo"></i>
                                </span> -->
                                <img :src="file" alt="">
                            </div>
                         </el-tooltip>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">发布活动</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'baseform',
        data: function(){
            return {
                form: {},
                file: ''
            }
        },
        methods: {
            onSubmit() {
                // this.$message.success('提交成功！');
                const h = this.$createElement;
                console.log('this.form :', this.form);
                let formData = new FormData();
                for(let key in this.form){
                    formData.append(key,this.form[key])
                }
                if(Object.keys(this.form).length != 0 || this.$refs.getfile.files.length!=0){
                    if(this.$refs.getfile.files.length!=0){
                        formData.append('pic', this.$refs.getfile.files[0]);
                    }
                    let config = {headers: {
                            'Content-Type': 'multipart/form-data'
                    }}
                    formData.append('adminid',JSON.parse(localStorage.admininfo).adminid);
                    this.$axios.post('/api/Activity/doActivity',formData,config).then(res => {
                        if(res.data == 1){
                            this.$notify({
                                type: 'success',
                                title: '成功',
                                message: h('p', { style: 'color: #2ecc71;'}, '发布成功！')
                            });
                            this.form = {};
                            this.$refs.getfile.value = "";
                            this.file = '';
                        }else{
                            this.$notify.error({
                                title:'错误',
                                message: h('p', { style: 'color: #eb2f06;'}, '修改失败，请确认文件格式为jpg,png,gif')
                            });
                        }
                    }).catch(err => {
                        console.log('err :', err);
                    });
                }
            },
            uploadLogo(){
                document.getElementById('logoFile').click();
            },
            getFile(){
                if(this.$refs.getfile.files.length == 0){
                    this.file = '';
                }else{
                    this.file = this.$refs.getfile.files[0];
                    this.getImgBase();                    
                }
            },
            getImgBase(){
                var _this = this;
                var file = this.$refs.getfile.files[0];
                var reader = new FileReader(); 
                //转base64
                reader.onload = function(e) {
                    _this.file = e.target.result;
                }
                reader.readAsDataURL(file);
            },
        }
    }
</script>

<style scoped>
.image-pre{
    height: 214px;
    width: 120px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    border: 0.5px dashed black;
    z-index: 10;
}
.image-pre>.upload-m{
    position: absolute;
    height: 214px;
    width: 120px;
    /* background-color: rgba(82, 82, 82, 0.5); */
    background-color: rgba(94, 78, 78, 0.45);
    transition: 0.5s;
    opacity: 0;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
}
.image-pre>.upload-mm{
    position: absolute;
    height: 214px;
    width: 120px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    z-index: 8;
}

.image-pre>img{
    width: auto;
    height: 214px;
}

.image-pre:hover .upload-m{
    opacity: 1;
}
</style>
